<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>欢迎页</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../laydate/laydate.js"></script>
    <script src="../js/city-picker.data.js"></script>
    <script src="../js/city-picker.js"></script>
    <script src="../js/publicJS.js"></script>
    <script src="/js/date.js"></script>
    <style>
        .city-picker-span {
            width: 300px;
        }
    </style>
</head>

<body style="background:#328f46">
<div class="headiv">
    <div class="logotag">
        <a class="logo"><img src="../img/logo.png" width="440" height="65"></a>
        <b class="line"></b>
    </div>
    <a class="username">欢迎登录：<i id="name"></i></a>
    <span class="btnbox">
    	<a class="update" href="/updatePerson" title="修改"></a><a class="exit" href="/logout" title="退出"></a>
    </span>
    <div class="clear" style="height:20px; background:#328f46"></div>
</div>

<div class="messagebox">
    <div class="messageleft">
        <ul class="Fstage">
            <shiro:hasRole name="normalUser">
                <li><a href="#"><em class="e3"></em>健康信息管理
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/healthInfoAdd">健康信息录入</a></li>
                        <li><a href="/healthInfoSelect">健康指数查询</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>运动信息管理
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/sportIndex">运动信息录入</a></li>
                        <li><a href="/sportIndexSelect">运动信息查询</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>心理测试
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/testPage">开始测试</a></li>
                        <li><a href="/testrecord">测试记录</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>健康新闻
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/healthnewsPage">健康新闻</a></li>
                    </ul>
                </li>
            </shiro:hasRole>

            <shiro:hasRole name="admin">
                <li><a href="#"><em class="e3"></em>用户管理
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/userManagement">用户管理</a></li>
                        <li><a href="/userManageSelect">查询所有用户</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>发布新闻
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/releaseNewsPage">发布新闻</a></li>
                    </ul>
                </li>
            </shiro:hasRole>
        </ul>
    </div>
    <!--****************以上不能动，页面固定的东西************************-->
    <div class="messageright">
        <div class="formpage">
            <div class="clear" style="height:20px"></div>
            <h2>健康信息管理
                <!--<a class="greenbtn add" onclick="callback()" href="#">新增</a>-->
                <a class="greenbtn add" onclick="callback()" href="#">显示更多</a>
            </h2>
            <div class="clear" style="height:30px"></div>

            <span class="information">
            	<div class="clear" style="height:10px"></div>

                <form class="datable">
                    <table width="100%" border="1" cellpadding="0" cellspacing="0">
                    	<tr>
                            <th>时间</th>
                            <th>身高（cm）</th>
                            <th>体重（kg）</th>
                            <th>饮食情况</th>
                            <th>睡眠质量</th>
                            <th>血压</th>
                            <th>操作</th>
                        </tr>
                        <tbody id="tbody">

                        </tbody>

                    </table>
                </form>
                <div class="clear"></div>
            </span>
            <div class="clear" style="height:50px"></div>


        </div>
    </div>
    <div class="clearh" style="height:0"></div>


    <!--弹出新增层-->
    <div class="popbox" style="width:900px;height: 200px">
        <h2>选择查询时间</h2>
        <form name="reg_testdate" style="width:800px;height: 150px">
            <div class="clear" style="height:50px;"></div>
            <table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td width="20%">时间</td>
                    <td width="50%">
                        <select class="smsel" id="year" name="YYYY" onChange="YYYYDD(this.value)">
                            <option value="">请选择 年</option>
                        </select>
                        <select class="smsel" id="month" name="MM" onChange="MMDD(this.value)">
                            <option value="">选择 月</option>
                        </select>
                    </td>
                    <td width="20%"><p class="tip">*此处不能为空</p></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <div class="clear" style="height:20px"></div>
                        <a href="#" id="sbtn" class="linebtn">保存</a>
                        <a href="#" onclick="addclose();" class="greenbtn">取消</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/city-picker.data.js"></script>
<script src="../js/city-picker.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/layer/layer.js"></script>

<script>
    function callback() {

        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn();
        $('.popbox').css('display', 'block');
    }

    showHealthInfo("2018-05");

    function addclose() {
        $('#mask').fadeOut();
        $('.popbox').css('display', 'none');
    }

    //显示健康信息数据
    function showHealthInfo(selectYearMonth) {
        $.ajax({
            url: "/selectHealthInfo",
            type: "post",
            data: {
                month: selectYearMonth
            },
            success: function (result) {
                if (result.code == 1) {
                    console.log(result.data);
                    $("#tbody").empty("");
                    for (var i in result.data) {
                        var times = dateFtt("yyyy-MM-dd hh:mm:ss", result.data[i].addDate);
                        appendInfo(result.data[i], times);
                    }
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    //拼接数据
    function appendInfo(o, addTime) {
        var tb = $("#tbody");
        var trs = $("<tr>" +
            "<td>" + addTime + "</td>" +
            "<td>" + o.height + "</td>" +
            "<td>" + o.weight + "</td>" +
            "<td>" + o.dietquality + "</td>" +
            "<td>" + o.sleepquality + "</td>" +
            "<td>" + o.bp + "</td>" +
            "<td>" +
            "<a onclick='modify()'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;" +
            "<a onclick='delete_info()'>删除</a>" +
            "</td>" +
            "<a onclick='modifytable()'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;" +
            "<a onclick='delete_info()'>删除</a>" +

            "</tr>");
        tb.append(trs);
    }

    //时间日期格式化
    function dateFtt(fmt, date) { //author: meizz
        var dates = new Date(date);
        var o = {
            "M+": dates.getMonth() + 1,                 //月份
            "d+": dates.getDate(),                    //日
            "h+": dates.getHours(),                   //小时
            "m+": dates.getMinutes(),                 //分
            "s+": dates.getSeconds(),                 //秒
            "q+": Math.floor((dates.getMonth() + 3) / 3), //季度
            "S": dates.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (dates.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    //显示更多
    $("#sbtn").click(function more() {
        var year = $("#year").val();
        var month = $("#month").val();
        if (month < 10) {
            month = "0" + month;
        }
        showHealthInfo(year + "-" + month);
        addclose();
    });
    function modifytable() {
        alert("??");
        layer.confirm('div',


            {
                btn: ['确认修改', '取消']

            }, function (index, layero) {
                //按钮【按钮一】的回调
                //修改数据
                $.ajax({
                    url: "/modify_info",
                    type: "post",
                    data: {
                        time: $("#input1").val(),
                        height: $("#height").val(),
                        weight: $("#weight").val(),
                        diet: $("input[name='diet']:checked").val(),
                        BP: $("#BP").val(),
                        SQ: $("input[name='SQ']:checked").val()
                    },
                    success: function (result) {
                        if (result.code == 1) {
                            alert(result.msg);
                        } else {
                            alert(result.msg);
                        }
                    },
                    error: function () {
                        alert("失败")
                    }
                });

            });
    }

    function delete_info(id) {
        alert("??");
        $.ajax({
            url:"/delete_info",
            type:"post",
            data:{
                healthInfo_id:id
            },
            success:function (result) {
                if (result.code == 1) {
                    alert(result.msg);
                } else {
                    alert(result.msg);
                }
            },
            error: function () {
                alert("失败");
            }

        });
    }

    function modify(id) {
        //转到修改页面
        window.location.href="/healthUpdatePage?health_id="+id;
    }

    function delete_info(id) {
        $.ajax({
            url:"/delete_info",
            type:"post",
            data:{
                healthInfo_id:id
            },
            success:function (result) {
                if (result.code == 1) {
                    alert(result.msg);
                } else {
                    alert(result.msg);
                }
            },
            error: function () {
                alert("失败");
            }

        });
    }

</script>
</body>
</html>
